iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 3560 瀏覽

鐵人賽 Modern Web DAY 30

前端三分鐘 X Progressive Web App 30 天製造解密系列第 30 篇

技術 Progressive Web App 跨平台安裝上架 (30)

Progressive Web App 跨平台安裝 Progressive Web App 本身就具有能被安裝的特性，此外也能夠透過 Bubblewrap 或是...

linyencheng ‧ 2021-10-13

0 Like 0 留言 3826 瀏覽

鐵人賽 Modern Web DAY 29

前端三分鐘 X Progressive Web App 30 天製造解密系列第 29 篇

技術 Progressive Web App NFC 入門實作 (29)

什麼是 Web NFC? NFC (Near Field Communication) 近場通訊是高頻 (13.56 MHz) 短距離無線通訊技術，只要距離 5...

linyencheng ‧ 2021-10-12

0 Like 0 留言 1105 瀏覽

鐵人賽 Modern Web DAY 28

前端三分鐘 X Progressive Web App 30 天製造解密系列第 28 篇

技術 Progressive Web App 取得 Geolocation API 地理資訊 (28)

什麼是 Geolocation API? 透過 Geolocation API 可以讓 Progressive Web App 存取用戶的位置，方便實作地理資訊...

linyencheng ‧ 2021-10-11

0 Like 0 留言 945 瀏覽

鐵人賽 Modern Web DAY 27

前端三分鐘 X Progressive Web App 30 天製造解密系列第 27 篇

技術 Progressive Web App 針對應用操作介面優化操作體驗 (27)

網頁的外觀和操作本質上還是和原生的有差異但可以透過配置來讓體驗更接近。全螢幕模式視覺設計事件操作全螢幕模式全螢幕模式有兩種方式，Progressi...

linyencheng ‧ 2021-10-10

0 Like 0 留言 1047 瀏覽

鐵人賽 Modern Web DAY 26

前端三分鐘 X Progressive Web App 30 天製造解密系列第 26 篇

技術 Progressive Web App 推播協定 (26)

之前已經可以用後端的套件去實作推播的伺服器，但那個套件實際上做了哪些事情? 金鑰對 Application server keys 傳輸內容加密 Payloa...

linyencheng ‧ 2021-10-09

0 Like 0 留言 1887 瀏覽

鐵人賽 Modern Web DAY 25

前端三分鐘 X Progressive Web App 30 天製造解密系列第 25 篇

技術 Progressive Web App 推播通知行為 (25)

推播通知行為推播通知行為主要分成視覺、後續事件兩大部分，前幾天的文章開箱了: 通知選項視覺後端推播伺服器實作處理推播事件這篇文章主要會更...

linyencheng ‧ 2021-10-08

0 Like 0 留言 1400 瀏覽

鐵人賽 Modern Web DAY 24

前端三分鐘 X Progressive Web App 30 天製造解密系列第 24 篇

技術 Progressive Web App 推播通知: 網站推播通知用戶端實作入門 (24)

什麼是網站推播通知推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法，所以目標是即使網站、App 關閉時也要能在背景接收推播。推播...

linyencheng ‧ 2021-10-07

0 Like 0 留言 2572 瀏覽

鐵人賽 Modern Web DAY 23

前端三分鐘 X Progressive Web App 30 天製造解密系列第 23 篇

技術 Progressive Web App Web Push: 網站推播通知伺服器實作入門 (23)

什麼是網站推播通知推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法，所以目標是即使網站、App 關閉時也要能在背景接收推播。推播...

linyencheng ‧ 2021-10-06

0 Like 0 留言 3429 瀏覽

鐵人賽 Modern Web DAY 22

前端三分鐘 X Progressive Web App 30 天製造解密系列第 22 篇

技術 Progressive Web App 推播通知: 網站推播通知原理開箱解密 (22)

什麼是網站推播通知推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法，所以目標是即使網站、App 關閉時也要能在背景接收推播。推播...

linyencheng ‧ 2021-10-05

0 Like 0 留言 1121 瀏覽

鐵人賽 Modern Web DAY 21

前端三分鐘 X Progressive Web App 30 天製造解密系列第 21 篇

技術 Progressive Web App Notifications API (21)

什麼是 Web Notifications API? 透過 Web Notifications API 可以讓 Progressive Web App 發出系統...

linyencheng ‧ 2021-10-04

0 Like 0 留言 1064 瀏覽

鐵人賽 Modern Web DAY 19

前端三分鐘 X Progressive Web App 30 天製造解密系列第 19 篇

技術 Progressive Web App 定期背景同步 (19)

什麼是 Periodic Background Sync API 透過在 service worker 搭配 Periodic Background Sync...

linyencheng ‧ 2021-10-02

0 Like 0 留言 960 瀏覽

鐵人賽 Modern Web DAY 18

前端三分鐘 X Progressive Web App 30 天製造解密系列第 18 篇

技術 Progressive Web App 存取通訊錄聯絡人 (18)

什麼是 Contact Picker API 透過 Contact Picker API 網頁也可以像 Native App 一樣去選取用戶的聯絡人資訊，API...

linyencheng ‧ 2021-10-01

0 Like 0 留言 785 瀏覽

鐵人賽 Modern Web DAY 17

前端三分鐘 X Progressive Web App 30 天製造解密系列第 17 篇

技術 Progressive Web App 透過系統分享內容: Web Share API & Web Share Target (17)

什麼是 Web Share API Web App 透過 Web Share API 就能夠使用系統提供的分享功能，將連結、內容和文件分享給安裝在裝置上的其他應...

linyencheng ‧ 2021-09-30

0 Like 0 留言 1328 瀏覽

鐵人賽 Modern Web DAY 16

前端三分鐘 X Progressive Web App 30 天製造解密系列第 16 篇

技術 Progressive Web App 喚醒鎖: 維持螢幕長亮的方法 (16)

什麼是喚醒鎖 (Screen Wake Lock API)? 喚醒鎖 (Screen Wake Lock API) 讓 App 不會因為省電設定而關閉螢幕，透過...

linyencheng ‧ 2021-09-29

0 Like 0 留言 938 瀏覽

鐵人賽 Modern Web DAY 15

前端三分鐘 X Progressive Web App 30 天製造解密系列第 15 篇

技術 Progressive Web App Audits (15)

什麼是 Lighthouse Audits? Lighthouse 是一套整合在 DevTools 中的開放原始碼檢測工具，用來檢測效能、可靠性、SEO、PWA...

linyencheng ‧ 2021-09-28

1 Like 0 留言 3101 瀏覽

鐵人賽 Modern Web DAY 14

前端三分鐘 X Progressive Web App 30 天製造解密系列第 14 篇

技術 Progressive Web App 存取本機檔案: File System Access API (14)

什麼是 File System Access API? 透過這個 File System Access API 就能透過程式操作本機上的檔案，舉例來說像是開啟或...

linyencheng ‧ 2021-09-27

0 Like 0 留言 1004 瀏覽

鐵人賽 Modern Web DAY 13

前端三分鐘 X Progressive Web App 30 天製造解密系列第 13 篇

技術 Progressive Web App 用戶端儲存簡介 (13)

什麼是用戶端儲存 (Client-side storage) 對一個 App 來說，為了達到某些目的，將相關資料存在用戶端是相對方便的，舉例來說個人偏好設定...

linyencheng ‧ 2021-09-26

0 Like 0 留言 1067 瀏覽

鐵人賽 Modern Web DAY 12

前端三分鐘 X Progressive Web App 30 天製造解密系列第 12 篇

技術 Progressive Web App 架構模式: App Shell Model 概念說明 (12)

什麼是 App Shell? App Shell 乍聽之下是一種技術，實際上是 Web App 架構模式 (Architectural Patterns)。 A...

linyencheng ‧ 2021-09-25

0 Like 0 留言 1497 瀏覽

鐵人賽 Modern Web DAY 11

前端三分鐘 X Progressive Web App 30 天製造解密系列第 11 篇

技術 Progressive Web App 離線後備頁面: 玩過 Chrome 小恐龍遊戲了嗎 (11)

離線後備頁面介紹 (offline fallback page) 離線後備頁面提供用戶在網路不穩定的情況下，一個備援的顯示頁面。在過去的網站大多由伺服器提供，...

linyencheng ‧ 2021-09-24

0 Like 0 留言 1296 瀏覽

鐵人賽 Modern Web DAY 10

前端三分鐘 X Progressive Web App 30 天製造解密系列第 10 篇

技術 Progressive Web App 個案分析: 樂天 24 導入 PWA 後帶來的好處 (10)

小編在讀 PWA 相關技術文章的時候，剛好讀到了樂天 24 這篇導入 PWA 的個案分析，樂天 24 是樂天集團底下的一個電商平台，主要銷售日常快速消費品，也就...

linyencheng ‧ 2021-09-23

0 Like 0 留言 1215 瀏覽

鐵人賽 Modern Web DAY 9

前端三分鐘 X Progressive Web App 30 天製造解密系列第 9 篇

技術 Progressive Web App Shortcuts: 程式快速啟動選單 (9)

什麼是 App Shortcuts App Shortcuts 提供程式快速啟動選單，透過這個捷徑用戶能夠更快速的使用各式功能，讓常用且關鍵的功能更容易被快速重...

linyencheng ‧ 2021-09-22

0 Like 0 留言 1005 瀏覽

鐵人賽 Modern Web DAY 8

前端三分鐘 X Progressive Web App 30 天製造解密系列第 8 篇

技術 Progressive Web App Badging API 入門實做 (8)

什麼是 Badging API Badging API 讓 App 能夠顯示通知數字，不過通知數字的位置會依照平台的不同而有所差異。常見是用來通知用戶，像是...

linyencheng ‧ 2021-09-21

0 Like 0 留言 787 瀏覽

鐵人賽 Modern Web DAY 7

前端三分鐘 X Progressive Web App 30 天製造解密系列第 7 篇

技術 Progressive Web App Checklist: 優化檢核清單項目說明 (7)

Starts fast, stays fast Web App 的效能會直接影響使用者體驗，也會影響到用戶會不會持續使用這個站台，當優化站台時可以多著重在使用者...

linyencheng ‧ 2021-09-20

0 Like 0 留言 1752 瀏覽

鐵人賽 Modern Web DAY 6

前端三分鐘 X Progressive Web App 30 天製造解密系列第 6 篇

技術 Progressive Web App 啟動和更新機制 (6)

PWA 啟動要怎麼知道 Web App 是在 PWA 已經被安裝情況下被開啟的，靠 CSS 中有個 display-mode，不管透過 tab 或是安裝的情況...

linyencheng ‧ 2021-09-19

0 Like 0 留言 1852 瀏覽

鐵人賽 Modern Web DAY 5

前端三分鐘 X Progressive Web App 30 天製造解密系列第 5 篇

技術 Progressive Web App Manifest: 配置檔屬性深入介紹 (5)

Web App 的 manifest 是一個 JSON 形式的配置檔，瀏覽器透過配置檔就會知道 Progressive Web App 該怎麼去安裝在用戶的電腦...

linyencheng ‧ 2021-09-18

0 Like 0 留言 1121 瀏覽

鐵人賽 Modern Web DAY 4

前端三分鐘 X Progressive Web App 30 天製造解密系列第 4 篇

技術 Progressive Web App Service Worker (4)

什麼是 Service Workers Service Workers 的角色是位於 Web App 與網路連接中間的一層 "代理網路連接"...

linyencheng ‧ 2021-09-17

0 Like 0 留言 3240 瀏覽

鐵人賽 Modern Web DAY 3

前端三分鐘 X Progressive Web App 30 天製造解密系列第 3 篇

技術 Progressive Web App 自主管理推薦安裝提示 (3)

Promoting installation 推薦安裝提示當我們的 Progressive Web App 滿足了安裝前的審核標準，瀏覽器就會觸發 befor...

linyencheng ‧ 2021-09-16

0 Like 0 留言 4841 瀏覽

鐵人賽 Modern Web DAY 2

前端三分鐘 X Progressive Web App 30 天製造解密系列第 2 篇

技術 Progressive Web App 加入主畫面 : PWA 究竟加入和安裝了什麼 (2)

加入主畫面 (Add to Home screen) 加入主畫面 (Add to Home screen) 常見的縮寫為 A2HS，可以看成是讓使用者將 Web...

linyencheng ‧ 2021-09-15

1 Like 0 留言 3216 瀏覽

鐵人賽 Modern Web DAY 1

前端三分鐘 X Progressive Web App 30 天製造解密系列第 1 篇

技術 Progressive Web App 開箱看看漸進式增強到底有多強 (1)

Progressive Web App (PWA) 使用當下最新潮的 Web API，Progressive 是用漸進增強的概念來建立跨平台 Web 應用程式。...

linyencheng ‧ 2021-09-14

0 Like 0 留言 1925 瀏覽

鐵人賽影片教學 DAY 16

智慧雲端物聯 - 關鍵輕專業（AIoT Cloud - Essential Shallow Expertise）系列第 18 篇

技術 APP開發 – PWA (2/2)

[Day 16] APP開發 – PWA (2/2)4.2：Progress Web APPs (PWA) 開發 (40min)-- 背景 : SPA, Of...

drm ‧ 2018-10-29

技術 Progressive Web App 跨平台安裝上架 (30)

技術 Progressive Web App NFC 入門實作 (29)

技術 Progressive Web App 取得 Geolocation API 地理資訊 (28)

技術 Progressive Web App 針對應用操作介面優化操作體驗 (27)

技術 Progressive Web App 推播協定 (26)

技術 Progressive Web App 推播通知行為 (25)

技術 Progressive Web App 推播通知: 網站推播通知用戶端實作入門 (24)

技術 Progressive Web App Web Push: 網站推播通知伺服器實作入門 (23)

技術 Progressive Web App 推播通知: 網站推播通知原理開箱解密 (22)

技術 Progressive Web App Notifications API (21)

技術 Progressive Web App 定期背景同步 (19)

技術 Progressive Web App 存取通訊錄聯絡人 (18)

技術 Progressive Web App 透過系統分享內容: Web Share API & Web Share Target (17)

技術 Progressive Web App 喚醒鎖: 維持螢幕長亮的方法 (16)

技術 Progressive Web App Audits (15)

技術 Progressive Web App 存取本機檔案: File System Access API (14)

技術 Progressive Web App 用戶端儲存簡介 (13)

技術 Progressive Web App 架構模式: App Shell Model 概念說明 (12)

技術 Progressive Web App 離線後備頁面: 玩過 Chrome 小恐龍遊戲了嗎 (11)

技術 Progressive Web App 個案分析: 樂天 24 導入 PWA 後帶來的好處 (10)

技術 Progressive Web App Shortcuts: 程式快速啟動選單 (9)

技術 Progressive Web App Badging API 入門實做 (8)

技術 Progressive Web App Checklist: 優化檢核清單項目說明 (7)

技術 Progressive Web App 啟動和更新機制 (6)

技術 Progressive Web App Manifest: 配置檔屬性深入介紹 (5)

技術 Progressive Web App Service Worker (4)

技術 Progressive Web App 自主管理推薦安裝提示 (3)

技術 Progressive Web App 加入主畫面 : PWA 究竟加入和安裝了什麼 (2)

技術 Progressive Web App 開箱看看漸進式增強到底有多強 (1)

技術 APP開發 – PWA (2/2)

標記使用者